<template>
	<body-wrap>
		<view class="topbg"></view>
		<view class="mallMain">
			<view class="leftNav">
				<view class="item" v-for="(dt,index) in navs" :key="dt.id" 
				:class="{'selected':tabIndex==index,'next':tabIndex==(index-1),'pre':tabIndex==(index+1)}"
				@click="setTab(index,dt.id)"
				>
					{{dt.name}}
				</view>
				<view class="zhanwei"></view>
			</view>
			<scroll-view class="mallscorll" @scrolltolower="getList" scroll-y="true">
				<view class="ul-list">
					<view class="list-item" v-for="dt in lists || []" :key="dt.id" @click="goDetails(dt)">
						<view class="imgbox">
							<image class="ming" :src="dt.imageUrl" mode="aspectFill"></image>
						</view>
						<view class="con">
							<view class="title">{{dt.name}}</view>
							<view class="desc">
								<!-- <text>月售9999+ </text> -->
								<text>好评100%</text>
							</view>
							<view class="xgou">
								<text class="txt">库存：{{dt.stock}}</text>
							</view>
							<!-- <view class="xgou">
								<text class="txt">2.88折  限一份</text>
							</view> -->
							<view class="price">
								￥<text class="num">{{dt.unitPrice}}</text>
								<!-- <view class="oldPrice">￥5.97</view> -->
							</view>
							<view class="addBtn" @click.stop="addGoods(dt)">
								<image class="img" :src="imgUrlPrefix+'static/images/add.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<empty v-if="lists && lists.length==0"/>
				</view>
				<uni-load-more :status="status" v-if="lists.length>0" />
			</scroll-view>
		</view>
		<view class="mallIndexBottom">
			<shopping-buy-list v-if="goods.length>0" @onclick="goNext"/>
		</view>

	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import shoppingBuyList from "@/components/shoppingBuyList/shoppingBuyList.vue"
	import empty from "@/components/empty/empty.vue"
	import {getGoodsList,getCategoryList} from "@/api/index.js"
	import {setStorage} from "@/utils/common.js"
	export default defineComponent({
		components:{
			bodyWrap,
			shoppingBuyList,
			empty
		},
		props:{
			
		},
		onReachBottom(){ // 滚动到底部
			console.log("到底部了......")
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				status:'loading',
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				number:0,
				navs:[],
				tabIndex:0,
				pageNumber:1,
				pageSize:20,
				lists:'',
				categoryId:0,
				total:0,
				goods:computed(()=>store.state.base.goods), // 选择的商品
				orderInfo:computed(()=>store.state.base.orderInfo), 
			})
			
			onShow(()=>{
				onShow(()=>{
					if(state.orderInfo.orderType==2){
						store.commit('base/clear_goods') // 清空
					}	
				})
			})
			
			onMounted(async()=>{
				await getCtgList()
				getList()
			})
			
			const getCtgList = ()=>{
				state.navs = [{id:0,name:'全部'}]
				new Promise((resolve,reject) =>{
					getCategoryList({
						parentId:15,
						state:1
					}).then(res =>{
						if(res.code!=0) return
						state.navs = [...state.navs, ...res.data]
						//state.tabIndex = state.navs[0].id
					})
				})
			}
			
			const getList = async ()=>{
				const res = await getGoodsList({
					pageNumber:state.pageNumber,
					pageSize:state.pageSize,
					categoryId:state.categoryId
				})
				if(res.code !=0) return
				//state.lists = res.data.list || []
				if(state.lists){
					state.lists = [...state.lists,...res.data.list]
				}else{
					state.lists = res.data.list || []
				}
				state.total = res.data.total
				state.pageNumber ++
				
				if(state.lists.length>=state.total){
					state.status = 'noMore' // 加载完
				}
				
			}
			
			const setTab = (index,id)=>{
				state.tabIndex = index
				state.categoryId = id
				init()
				getList()
			}
			const init = ()=>{
				state.lists = ''
				state.status = 'loading'
				state.pageNumber = 1
			}
			
			const goDetails = (item)=>{
				//setStorage('goodsDetais',JSON.stringify(item))
				store.commit('base/clear_goods') // 清空
				store.commit('base/add_goods',item)
				//state.orderInfo.orderType = 1 
				uni.navigateTo({
					url:`/pages/details/details?id=${item.id}&orderType=1`
				})
			}
			
			const addGoods = (item)=>{
				//console.log("rrr:",item)
				state.orderInfo.orderType = 1  // 1表示服务类订单
				store.commit('base/add_goods',item)
			}
			
			const goNext = ()=>{
				state.orderInfo.orderType = 1 
				uni.navigateTo({
					url:'/pages/mallBuy/mallBuy'
				})
			}
			
			return {
				...toRefs(state),
				getList,
				setTab,
				goDetails,
				addGoods,
				goNext
			}
		}
	})
</script>

<style lang="scss" scoped>
	.topbg{
		height: 50rpx;
		width: 100%;
		background: #fba70e;
	}
	.mallMain{
		position: fixed;
		display: flex;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0;
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		margin: 0;
		overflow: hidden;
		
	}
	.leftNav{
		display: flex;
		flex-flow: column;
		width: 190rpx;
		flex-shrink: 0;
		color: #000;
		.item{
			font-size: 34rpx;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 0 0 30rpx;
			background-color: #fcf7ee;
			&.selected{
				background: #fff;
				&+.zhanwei{
					border-top-right-radius: 30rpx;
				}
			}
			&.next{
				border-top-right-radius: 30rpx;
			}
			&.pre{
				border-bottom-right-radius: 30rpx;
			}
		}
		.zhanwei{
			flex: 1;
			background-color: #fcf7ee;
		}
	}
	.ul-list{
		box-sizing: border-box;
		width: 100%;
		padding:30rpx 20rpx;
		margin: 0;
		.list-item{
			display: flex;
			box-sizing: border-box;
			padding: 0 ;
			width: 100%;
			overflow: hidden;
			&+.list-item{
				margin-top: 30rpx;
			}
			.imgbox{
				width: 180rpx;
				height: 190rpx;
				border-radius: 20rpx;
				overflow: hidden;
				.ming{
					width: 100%;
					height: 100%;
				}
			}
			.con{
				position: relative;
				z-index: 2;
				flex: 1;
				width: 0;
				padding: 0 0 0 20rpx;
				.title{
					height: 50rpx;
					line-height: 50rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
					font-size: 30rpx;
					font-weight: bold;
				}
				.desc{
					font-size: 26rpx;
					color: #8c8c8c;
				}
				.xgou{
					padding: 10rpx 0;
					.txt{
						font-size: 26rpx;
						color: #ff0000;
						border: 1px solid #b4b4b4;
						border-radius: 10rpx;
						padding: 5rpx 15rpx;
					}
				}
				.price{
					display: flex;
					align-items: center;
					color: #ff0000;
					font-size: 28rpx;
					font-weight: bold;
					.num{
						font-size: 38rpx;
					}
					.oldPrice{
						margin: 0 0 0 30rpx;
						color: #8c8c8c;
					}
				}
				.addBtn{
					position: absolute;
					z-index: 2;
					width: 50rpx;
					right: 20rpx;
					bottom: 0;
					.img{
						display: block;
						width: 100%;
						height: auto;
						&:hover{
							opacity: 0.4;
						}
					}
				}
			}
		}
		
	}
	.mallIndexBottom{
		position: fixed;
		z-index: 900;
		width: 100%;
		left: 0;
		bottom: 0;
	}
	.mallscorll{
		//padding-bottom:100rpx;
	}
</style>
